<project-header class="top-header"></project-header>
  <project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div id="scrollable-content" class="middle-container has-scroll">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">{{'Loading' |translate}}...</div>
          <div ng-if="imageStream">
            <h1>
              {{imageStream.metadata.name}}
              <div class="pull-right dropdown">
                <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">{{'Actions' | translate}}</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li>
                    <edit-link
                      resource="imageStream"
                      kind="imagestreams"
                      alerts="alerts">
                    </edit-link>
                  </li>
                  <li>
                    <delete-link
                      resource-type="imagestream"
                      resource-name="{{imageStream.metadata.name}}"
                      project-name="{{imageStream.metadata.namespace}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
              <small class="meta">created <relative-timestamp timestamp="imageStream.metadata.creationTimestamp"></relative-timestamp></small>
            </h1>
            <labels labels="imageStream.metadata.labels" clickable="true" kind="images" project-name="{{imageStream.metadata.namespace}}" limit="3"></labels>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content gutter-top">
        <div class="container-fluid">
          <div class="row" ng-if="imageStream">
            <div class="col-md-12">
              <div class="resource-details">
                <dl class="dl-horizontal left">
                  <dt ng-if-start="imageStream.spec.dockerImageRepository">{{'Followsdockerrepo' | translate}}:</dt>
                  <dd ng-if-end>{{imageStream.spec.dockerImageRepository}}</dd>
                  <dt>{{'Dockerpullspec' | translate}}:</dt>
                  <dd>{{imageStream.status.dockerImageRepository}}</dd>
                </dl>
                <annotations annotations="imageStream.metadata.annotations"></annotations>
              </div>
              <div class="table-responsive">
                <table class="table table-bordered table-hover table-mobile">
                  <thead>
                    <tr>
                      <th>{{'Tag' |translate}}</th>
                      <th>{{'From' | translate}}</th>
                      <th>{{'LatestImage' | translate}}</th>
                      <th>{{'Created' | translate}}</th>
                      <th>{{'PullSpec' | translate}}</th>
                    </tr>
                  </thead>
                  <tbody ng-if="(tagsByName | hashSize) == 0">
                    <tr><td colspan="5"><em>{{emptyMessage | translate}}</em></td></tr>
                  </tbody>
                  <tbody>
                    <tr ng-repeat-start="tag in tagsByName | orderBy : 'name'">
                      <td>{{tag.name}}</td>
                      <td>
                        <!-- this value can get long when its an ImageStreamImage. Use max width and class truncate to elide some
                             of the SHA1 for long values. They can still be copied even when elided. -->
                        <div style="max-width: 400px;" class="truncate">
                          <span ng-if="!tag.spec.from"><em>pushed</em></span>
                          <span ng-if="tag.spec.from">
                            <span ng-if="!tag.spec.from._imageStreamName">
                              {{tag.spec.from.name}}
                            </span>
                            <span ng-if="tag.spec.from._imageStreamName">
                              <span ng-if="tag.spec.from._imageStreamName === imageStream.metadata.name">{{tag.spec.from._completeName}}</span>
                              <span ng-if="tag.spec.from._imageStreamName !== imageStream.metadata.name" >
                                <a ng-href="{{tag.spec.from._imageStreamName | navigateResourceURL : 'ImageStream' : (tag.spec.from.namespace || imageStream.metadata.namespace)}}"><span ng-if="tag.spec.from.namespace && tag.spec.from.namespace !== imageStream.metadata.namespace" >{{tag.spec.from.namespace}}/</span>{{tag.spec.from._imageStreamName}}</a>{{tag.spec.from._nameConnector}}{{tag.spec.from._idOrTag}}
                              </span>
                            </span>
                          </span>
                        </div>
                      </td>
                      <td>
                        <div ng-if="!tag.status">
                          <div ng-if="imageStream | annotation : 'openshift.io/image.dockerRepositoryCheck'">
                            <span class="pficon pficon-warning-triangle-o" style="margin-right: 5px;"
                                  ng-attr-title="{{imageStream | annotation : 'openshift.io/image.dockerRepositoryCheck'}}"></span>
                            <span>Unable to resolve</span>
                          </div>
                          <div ng-if="!(imageStream | annotation : 'openshift.io/image.dockerRepositoryCheck')">
                            <span ng-if="!tag.spec.from">Not yet synced</span>
                            <!-- We have no idea why in this case -->
                            <span ng-if="tag.spec.from">Unresolved</span>
                          </div>
                        </div>
                        <div ng-if="tag.status">
                          <span ng-if="tag.status.items.length && tag.status.items[0].image" class="nowrap">
                            <short-id id="{{tag.status.items[0].image | imageName}}"></short-id>
                            <a href="" ng-if="tag.status.items.length > 1" ng-click="tagShowOlder[tag.name] = !tagShowOlder[tag.name]" ng-attr-title="{{tagShowOlder[tag.name] ? 'Hide older images' : 'Show older images'}}"><span class="fa fa-clock-o"></span><span class="fa fa-caret-up" ng-if="tagShowOlder[tag.name]" style="margin-left: 3px;"></span></a>
                          </span>
                          <span ng-if="!tag.status.items.length"><em>none</em></span>
                        </div>
                      </td>
                      <td>
                        <span ng-if="tag.status.items.length && tag.status.items[0].image">
                          <relative-timestamp timestamp="tag.status.items[0].created"></relative-timestamp>
                        </span>
                      </td>
                      <td>
                        <!-- dockerImageReference values can get long. Use max width and class truncate to elide some of the SHA1 for long values.
                             They can still be copied even when elided. -->
                        <div ng-if="tag.status.items.length && tag.status.items[0].dockerImageReference" style="max-width: 400px;" class="truncate"
                               ng-attr-title="{{tag.items[0].dockerImageReference}}">
                           {{tag.status.items[0].dockerImageReference}}
                        </div>
                      </td>
                    </tr>
                    <tr ng-repeat="item in tag.status.items" ng-if="tagShowOlder[tag.name] && !$first && item.image">
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>
                        <short-id id="{{item.image | imageName}}"></short-id>
                      </td>
                      <td>
                        <relative-timestamp timestamp="item.created"></relative-timestamp>
                      </td>
                      <td>
                        <div ng-if="item.dockerImageReference" style="max-width: 400px;" class="truncate"
                               ng-attr-title="{{item.dockerImageReference}}">
                           {{item.dockerImageReference}}
                        </div>
                      </td>
                    </tr>
                    <tr ng-repeat-end style="display: none;"></tr>
                  </tbody>
                </table>
              </div>
            </div><!-- /col-* -->
          </div>
        </div>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
  </project-page>
